<template>
  <div class="consumer-page">
    <el-breadcrumb class="breadcrumb page-title" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">Bookings</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container-padding">
      <!--serchBox-->
      <div class="search-box">
        <el-form :inline="true" label-position="top" :model="searchForm" size="mini" ref="ruleForm"
                 class="demo-ruleForm main-search-box">

          <el-form-item label="Restaurant Name" style="width: 200px;">
            <el-input v-model="searchForm.restaurantName" placeholder=""></el-input>
          </el-form-item>

          <el-form-item label="Restaurant ID" style="width: 200px;">
            <el-input type="number" v-model="searchForm.restaurantId" placeholder=""></el-input>
          </el-form-item>

          <el-form-item label="Consumer Name" style="width: 200px;">
            <el-input v-model="searchForm.consumerName" placeholder=""></el-input>
          </el-form-item>

          <el-form-item prop="region" label="Year" style="width: 100px;margin-right: 10px">
            <el-select style="width: 100px" v-model="searchForm.year" placeholder="">
              <el-option v-for="i in yearOption" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="region" label="Month" style="width: 100px;margin-right: 0">
            <el-select style="width: 100px" v-model="searchForm.mounth" placeholder="">
              <el-option v-for="i in mounthOption" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="margin-top: 37px;margin-left: 30px;">
            <el-button @click="getList(1)">Search</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!--list-->
      <div class="list-items-box">
        <!--表格-->
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          border
          @selection-change="handleSelectionChange"
          style="width: 100%">

          <!--Date-->
          <el-table-column
            prop="bookDatetime"
            label="Date"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              <p>{{dateFormat(scope.row.bookDatetime, 'Date')}}</p>
            </template>
          </el-table-column>

          <!--Day-->
          <el-table-column
            prop="day"
            label="Day"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              <p>{{getDay(scope.row.day)}}</p>
            </template>
          </el-table-column>

          <!--Time-->
          <el-table-column
            prop="Time"
            label="Time"
            align="center"
            min-width="120">
            <template slot-scope="scope">
              <!--timeHour  timeMinute  timeFlag(0:上午am，1:下午pm)-->
              <p>{{getTime(scope.row.timeFlag, scope.row.timeHour, scope.row.timeMinute)}}</p>
            </template>
          </el-table-column>

          <!--Discount %-->
          <el-table-column
            prop="discount"
            label="Discount %"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Party size-->
          <el-table-column
            prop="people"
            label="Party size"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Made-->
          <el-table-column
            prop="createDatetime"
            label="Made"
            align="center"
            min-width="120">
            <template slot-scope="scope">
              <p>{{dateFormat(scope.row.createDatetime, 'made')}}</p>
            </template>
          </el-table-column>

          <!--Booking Status-->
          <el-table-column
            prop="status"
            label="Booking Status"
            align="center"
            min-width="120">
            <template slot-scope="scope">
              <p>{{getBookingStatus(scope.row.status)}}</p>
            </template>
          </el-table-column>

          <!--Restaurant Name-->
          <el-table-column
            prop="restaurantName"
            label="Restaurant Name"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Consumer Name-->
          <el-table-column
            prop="consumerName"
            label="Consumer Name"
            align="center"
            min-width="120">
          </el-table-column>

        </el-table>
        <!--分页-->
        <div class="block" style="margin-top: 15px;text-align: center;">
          <el-pagination
            @size-change="handleChangeSize"
            @current-change="handleChangePage"
            :current-page="pageData.pageNo"
            :page-size="pageData.pageSize"
            :page-sizes="[10, 20, 50, 100, 500]"
            :page-count="pageInfo.totalPages"
            :total="pageInfo.totalCount"
            layout="total, prev, pager, next, jumper, sizes">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import {bookingList} from '../../api/zxy_api.js'

  export default {
    name: 'bookings',
    data() {
      return {
        consumerSearchStausOption: [
          {
            value: '0',
            label: 'Active'
          },
          {
            value: '1',
            label: 'Suspended'
          },
        ],
        searchForm: {
          restaurantId: '',
          restaurantName: '',
          consumerName: '',
          datetime: '',
          year: '',
          mounth: '',
        },
        yearOption: [{
          label: '2018',
          value: 2018
        }, {
          label: '2019',
          value: 2019
        }],
        mounthOption: [
          {
            label: '1',
            value: 1
          },
          {
            label: '2',
            value: 2
          },
          {
            label: '3',
            value: 3
          },
          {
            label: '4',
            value: 4
          },
          {
            label: '5',
            value: 5
          },
          {
            label: '6',
            value: 6
          },
          {
            label: '7',
            value: 7
          },
          {
            label: '8',
            value: 8
          },
          {
            label: '9',
            value: 9
          },
          {
            label: '10',
            value: 10
          },
          {
            label: '11',
            value: 11
          },
          {
            label: '12',
            value: 12
          }
        ],
        bookingStatus: [
          {
            id: 1,
            name: "uncoming",
          },
          {
            id: 2,
            name: "arrived",
          },
          {
            id: 3,
            name: "no show",
          },
          {
            id: 4,
            name: "cancelled",
          },
          {
            id: 5,
            name: "block",
          }
        ],
        pageData: {
          pageNum: 1,
          pageSize: 10,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        tableLoading: false,
        tableData: [],
      }
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val
        // [{row当前所有数据，developmentId}]
      },
      handleChangeSize(val) {
        this.pageData.pageSize = parseInt(val)
        this.pageData.pageNum = 1
        this.getList()
      },
      handleChangePage(val) {
        this.pageData.pageNum = val
        this.getList()
      },
      dateFormat(value, str) {
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        if (str == 'listedDate') {
          var t = d + '-' + m + '-' + Y + '  ' + H + ':' + i + ':' + s
          return t
        }
        if (str == 'Date') {
          var tDate = d + '-' + m + '-' + Y
          return tDate;
        }
        if (str == 'made') {
          var amOrpm = '';
          if (H > 12) {
            amOrpm = ' pm'
          } else {
            amOrpm = ' am'
          }
          var tMade = d + '-' + m + '-' + Y + '  ' + H + ':' + i + amOrpm
          return tMade;
        }
        else {
          var ts = m + '-' + Y
          return ts
        }
      },
      getDay(day) {
        var val = '';
        // 0-6 递增
        switch (day) {
          case 0 :
            val = 'Monday';
            break;
          case 1 :
            val = 'Tuesday';
            break;
          case 2 :
            val = 'Wednesday';
            break;
          case 3 :
            val = 'Tuesday';
            break;
          case 4 :
            val = 'Friday';
            break;
          case 5 :
            val = 'Saturday';
            break;
          case 6 :
            val = 'Sunday';
            break;
        }
        return val;
      },
      getTime(timeFlag, timeHour, timeMinute) {
        // 0:am  1:pm
        if (timeFlag == 0) {
          return timeHour + '.' + timeMinute + ' am'
        } else {
          return timeHour + '.' + timeMinute + ' pm'
        }
      },
      getBookingStatus(id) {
        for (var i in this.bookingStatus) {
          if (id == this.bookingStatus[i].id) {
            return this.bookingStatus[i].name;
          }
        }
      },
      getList(pageNum) {
        this.tableLoading = true;
        if (pageNum == 1) {
          this.pageData.pageNum = 1;
        }

        let searchForm = {
          restaurantId: this.searchForm.restaurantId || '',
          restaurantName: this.searchForm.restaurantName || '',
          consumerName: this.searchForm.consumerName || '',
        };

        if (this.searchForm.year && this.searchForm.mounth) {
          searchForm.datetime = this.searchForm.year + '-' + this.searchForm.mounth;
        }

        bookingList(Object.assign(searchForm, this.pageData)).then((res) => {

          this.tableData = res.data.object.list || []

          // // 分页信息配置
          this.pageInfo.totalPages = res.data.object.pages
          this.pageInfo.totalCount = res.data.object.total

          this.tableLoading = false;

        }).catch((e) => {
          console.log(e)
          this.tableLoading = false;
        })
      },
    },
    mounted() {
      this.getList()
    }
  }
</script>


<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px !important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .search-box {
    position: relative;
    /*padding-top: 20px;*/
    border-bottom: 1px solid #eee;
  }

  .line-form {
    border-top: 1px solid #eee;
  }

  .more-box, .list-items-box {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .list-items-box {
    /*margin-right: 10%;*/
  }

  .list-items-box .el-form--inline.el-form--label-top .el-form-item__content {
    display: inline-block;
  }

  .change-status {
    font-size: 14px;
    margin-right: 10px;
  }

  .options {
    padding: 0px 0 20px 0;
  }

  .container-padding {
    padding: 0 40px;
  }

  .list-notes {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
  }

  .new-user-dialog .el-form-item {
    margin-bottom: 0 !important;
  }
</style>
